<template>
	<view class="page" :style="skin">
		<jnavbar :title="'订单支付'"></jnavbar>
		<view class="uni-flex-column-center price-wrapper">
			<text>支付金额</text>
			<text class="price">￥{{ total }}</text>
		</view>
		<view class="pay_div">
			<view v-for="(item, i) in pay_type_list" class="uni-flex-row uni-flex-title cell" @click="index = i">
				<view class="uni-flex-row">
					<vimage imgtype="1" class="pay_icon" :src="item.src" mode=""></vimage>
					<view class="uni-flex-column">
						<text class="lg-font">{{ item.value }}</text>
						<text v-if="item.type == 'recharge'" class="sm-font">账户可用余额{{ UserInfo.total }}</text>
					</view>
				</view>
				<text v-if="index == i" class="iconfont el-sc-dui"></text>
			</view>
		</view>
		<!-- #ifdef MP-WEIXIN -->
		<u-button shape="circle" :loading="loading" :custom-style="customStyle" @click="requestSubscribe" type="primary">确认支付</u-button>
		<!-- #endif -->
		<!-- #ifndef MP-WEIXIN -->
		<u-button shape="circle" :loading="loading" :custom-style="customStyle" @click="paymentpay" type="primary">确认支付</u-button>
		<!-- #endif -->
		<!-- <a href='https://wx.tenpay.com/cgi-bin/mmpayweb-bin/checkmweb?prepay_id=wx25111251762993f1e5a56032d0bc2c0000&package=1400765175&referer=https://z.jingzhe365.com'>dianj</a> -->
	</view>
</template>

<script>
var qs = require('qs');
import util from '@/common/util.js';
import {mapState, mapMutations} from 'vuex';
export default {
	onShareAppMessage() {
		return this.wxShare();
	},
	data() {
		return {
			total: 0,
			list: [],
			index: 0,
			tmplIds: [],
			loading: false,
			customStyle: {
				width: '560rpx',
				height: '88rpx',
				marginLeft: '95rpx',
				marginTop: '80rpx'
			},
			pay_type_list: [
				{
					value: '微信',
					src: 'static/images/wxpay.png',
					type: 'wx',
					pay_type: 2
				},
				{
					value: '余额',
					src: 'static/images/balance.png',
					type: 'recharge',
					pay_type: 1
				}
			]
		};
	},
	async onLoad(e) {
		await this.$getWx
		this.list = e.list;
		this.total = e.total;
		this.getjuris('mallPayMode').then(m => {
			// #ifdef MP-WEIXIN
			let a = m.wechata;
			this.pay_type_list = this.pay_type_list.filter(b => {
				return a[b.type];
			});
			this.wxamessage();
			// #endif
			// #ifdef H5
			let Browser = util.getBrowser();
			let is_wx = uni.getStorageSync('is_wx')
			if(Browser=='微信'&&is_wx){
				var a = m.wechat;
			}else{
				var a = m.web;
			}
			// let a = m.wechat;
			this.pay_type_list = this.pay_type_list.filter(b => {
				return a[b.type];
			});
			// #endif
		});
		this.userCenter();
	},
	computed: {
		...mapState({
			UserInfo: state => state.userInfo,
			skin: state => state.skin
		})
	},

	methods: {
		userCenter() {
			let params = {};
			this.$http('/user/UserCenter', params, 'GET').then(res => {
				let centerinfo = res.data.msg;
				let myUserInfo = Object.assign({}, this.UserInfo, centerinfo);
				this.$store.commit('setUserInfo', myUserInfo);
			});
		},
		wxamessage() {
			this.$http('/wx/tool/wxa/message/pay', {}, 'GET').then(res => {
				let tmplIds = res.data.msg;
				this.tmplIds = tmplIds;
			});
		},
		minpay() {
			var that = this;
			wx.showModal({
				title: '温馨提示',
				content: '为更好的促进您与卖家的交流，服务号需要在您的订单成交时向您发送消息',
				confirmText: '同意',
				cancelText: '拒绝',
				success: function(res) {
					if (res.confirm) {
						//调用订阅消息
						console.log('用户点击确定');
						//调用订阅
						that.requestSubscribe();
					} else if (res.cancel) {
						console.log('用户点击取消');
						///显示第二个弹说明一下
						wx.showModal({
							title: '温馨提示',
							content: '拒绝后您将无法获取实时的与卖家的交易消息',
							confirmText: '知道了',
							showCancel: false,
							success: function(res) {
								///点击知道了的后续操作
								///如跳转首页面
							}
						});
					}
				}
			});
		},
		messageresult(data) {
			this.$http('/wx/tool/wxa/message/result', data, 'POST').then(res => {
				this.paymentpay();
			});
		},

		requestSubscribe() {
			var _this = this;
			// this.paymentpay()
			console.log(_this.tmplIds);
			if (_this.tmplIds.length > 0) {
				wx.requestSubscribeMessage({
					tmplIds: _this.tmplIds,
					success(res) {
						// let data=res;
						delete res.errMsg;
						let data = {
							data: JSON.stringify(res)
						};
						_this.messageresult(data);
					},
					fail(res) {
						console.log(res);
						_this.paymentpay();
					},
					complete(res) {
						console.log(res);
					}
				});
			} else {
				this.paymentpay();
			}
		},

		//获取支付参数
		paymentpay() {
			let _this = this;
			if (this.loading) {
				return false;
			}
			this.loading = true;
			if (!this.pay_type_list[this.index]) {
				uni.showToast({
					title: '商家未配置支付方式！',
					icon: 'none'
				});
				return;
			}
			this.type = this.pay_type_list[this.index].pay_type;
			var data = {
				type: this.type,
				orderList: this.list

				// 'orderList[]':12,
			};
			setTimeout(() => {
				_this.loading = false;
			}, 1500);
			this.$http('/payment/pay', data, 'POST').then(res => {
				const json = res.data.msg;
				if (res.statusCode == 200) {
					if (this.type == 1) {
						this.payback();
					} else {
						// #ifdef MP-WEIXIN
						if(json.mode==1){
							uni.requestPayment({
								provider: 'wxpay',
								appId: json.appId,
								timeStamp: json.timeStamp,
								nonceStr: json.nonceStr,
								package: json.package,
								signType: json.signType,
								paySign: json.paySign,
								success: function(res) {
									_this.payback();
								},
								fail: function(err) {}
							});
						}else{
							wx.requestOrderPayment({
								provider: 'wxpay',
								appId: json.appId,
								timeStamp: json.timeStamp,
								nonceStr: json.nonceStr,
								package: json.package,
								signType: json.signType,
								paySign: json.paySign,
								success: function(res) {
									_this.payback();
								},
								fail: function(err) {
									console.log(err)
								}
							})
						}
					
						// #endif
						// #ifdef H5
						let Browser = util.getBrowser();
						let is_wx = uni.getStorageSync('is_wx')
						if (Browser == '微信' && is_wx) {
							util.wxPublicPay(json, this.payback);
						} else {
							let mid=uni.getStorageSync('mall_id')
							let token=uni.getStorageSync('token')
							_AP.pay(json,mid,token)
							// window.location.href = json;
						}

						//

						// #endif
					}
				} else {
					uni.showModal({
						title: '提示',
						content: json,
						showCancel: false
					});
				}
			});
		},
		payback() {
			this.Jumpurl({
				type: 1,
				link: '../order/afterpay?total=' + this.total + '&type=' + this.type+'&id='
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.page {
	background: #fff;
	height: 100vh;
}

.price-wrapper {
	background-color: #fff;
	height: 260rpx;
	font-size: 28rpx;
	color: #909399;
	justify-content: center;

	.price {
		font-size: 56rpx;
		color: #333;
		margin-top: 20rpx;
		font-weight: 600;
	}
}

.pay_div {
	padding: 0 80rpx;

	.cell {
		height: 124rpx;
		position: relative;

		&::after {
			position: absolute;
			z-index: 3;
			left: 0;
			top: auto;
			bottom: 0;
			right: 0;
			height: 0;
			content: '';
			-webkit-transform: scaleY(0.5);
			transform: scaleY(0.5);
			border-bottom: 1px solid #e0e0e0;
		}

		.lg-font {
			font-weight: bold;
		}

		.sm-font {
			color: #999;
			margin-top: 14rpx;
		}
	}
}

.pay_icon {
	width: 44rpx;
	height: 44rpx;
	margin-right: 32rpx;
}

.el-sc-dui {
	font-size: 36rpx;
	color: var(--main-color);
}
</style>
